<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>商品卡片布局</title>
		<style>
			/*思路：1.去除元素默认外边距【通配选择器】 设置背景颜色
			        2.product_card设置样式：内边距，边框设置颜色，加倒角
					加阴影，所有内容--居中：text-align:center
					3.图片边框倒角，外边距
					4.小米su7  文字：外边距
					5.￥279999.00 文字大小，外边距
					6.颜色
			*/
			#product_card{
				overflow: hidden;
				background: #e4e4e4;
				width: 280px;
				border-radius: 10px;
				border: 1px solid #e4e3e4;
				padding: 5px;
			}
			img{
				margin: 10px;
				border-radius: 10px;
				box-shadow: 0px 1px 2px #000000;
			}
			h3{
				text-align: center;
				margin: 5px 0px 20px 0px;
			}
			p1{
				text-align: center;
				color: #ff0000;
				margin: 10px 0px 0px 92px;
				font-size: 16px;
			}
			p{
				text-align: center;
				color: #b3b2b3;
				font-size: 14px;
			}
		</style>
	</head>
	<body>
		<div id="product_card">
			<img src="img/小米su7.jpg" alt="su7" width="260px" height="385px">
			<h3>小米SU7</h3>
			<p1>￥279999.00</p1>
			<p>已有<span>10万+</span>人评价</p>
		</div>
	</body>
</html>